import React from 'react'
import { Form, Input, Button, Message ,Upload,Icon,Row,Col,Table,DatePicker,Select} from 'antd';
const FormItem = Form.Item;
import withdrawApi from '../../../api/withdraw';
const { RangePicker } = DatePicker;
const Option = Select.Option;
import moment from 'moment';

import './index.less'
import PanelBox from '../../../components/PanelBox';
import {INTERFACE_CORE_URL} from '../../../api/config';

import PayModal from '../../Common/PayModal';

export default class showWallet extends React.Component {
  state = {
    balance : 0.00,
    tableData:[],
    pagination: {
      pageSize: 10,
      pageNum: 1,
    },
    setSearchParam:[]
  }
  initData = () => {
    this.setState({ loading: true });
    withdrawApi.get('/queryWallet').then((data) => {
      const _data = data.data;
      this.setState({
        loading: false,
        balance: _data.balance
      });
    });
  }
  getAllLog = (params) => {
    let user =this.props.profile.user;
    params.officeId=user.officeId;
    this.setState({ loading: true });
    withdrawApi.get('/balancelog/all',{params}).then((data) => {
      const _data = data.data.list;
      const pagination = { ...this.state.pagination };
      pagination.total = data.data.total;
      this.setState({
        loading: false,
        tableData: _data,
        pagination,
      });
    });
  }
  handleTableChange = (pagination, filters, sorter) => {
    pagination.pageNum=pagination.current;
    this.setState({pagination});
   
    this.getAllLog({...pagination});
  }

  componentDidMount = () =>{
    this.initData();
    this.getAllLog({});
  }
  payCallback = (e) =>{
    this.hidePayModal();
    this.initData();
  }
  hidePayModal = (e) =>{
    this.setState({ 
       payModel:{ showPay : false}
    })
  }
  showPay = (e) =>{
    this.setState({
      payModel:{
        showPay : true,
        payTitle : "钱包余额充值",
        payType : 1,
        payMoney:100
      }
    })
  }
  columns = [{
    title: '类型',
    dataIndex: 'type',
    width: 250,
    render: (text, record, index) => {
      switch (record.type) {
        case 100:
          return '充值';
        case 101:
          return '提现';
        case 102:
          return '发布广告机广告扣除';
        case 103:
          return '发布家庭锁广告扣除';
        case 104:
          return '发布手机屏保广告扣除';
        case 105:
          return '广告机广告获得';
        case 106:
          return '家庭锁广告获得';
        case 107:
          return '手机屏保广告获得';
        default:
          return '未知';
      }
    },
  }, {
    title: '金额',
    dataIndex: 'money',
    width: 150,
  }, {
    title: '操作时间',
    dataIndex: 'createDate',
  }];

 
  render() {
    return (
      <div>
      <PanelBox>
        <PayModal showPay={this.state.payModel} payCallback={this.payCallback} hidePayModal={this.hidePayModal} />
        <div id="show_wallet">
             <Button onClick={this.showPay} type="primary" size="large">充值</Button>
             &nbsp;&nbsp;&nbsp;&nbsp;您当前余额为：{this.state.balance || 0} 元
        </div>
      </PanelBox >
      <PanelBox title="收支明细">
          <SearchForm searchUserState={this.state}  goSearch={this.handleTableChange} />
          <Table columns={this.columns} dataSource={this.state.tableData} rowKey='id' onChange={this.handleTableChange} pagination={this.state.pagination} loading={this.state.loading} />
      </PanelBox>
      </div>
    )
  }

}

class SearchsForm extends React.Component {
  // 开始搜索
  goSearch = (e) => {
    let params = this.props.form.getFieldsValue().search;
    let _this = this.props;
   
    if (params.date.length > 0) {
      params.startCreateDate = moment(params.date[0]).format("YYYY-MM-DD");
      params.endCreateDate = moment(params.date[1]).format("YYYY-MM-DD");
    }
    if(params.types == -1){
      delete params.types;
    }
    delete params.date;

    params.pageSize = _this.searchUserState.pagination.pageSize;
    params.pageNum = _this.searchUserState.pagination.pageNum;
    params.current =1;

    _this.goSearch(params);

  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const search = {
      type: "types",
      date: "date",
    };

    return <Form onSubmit={this.goSearch} layout="inline" style={{ marginBottom: '10px' }}>
      <FormItem label="类型">
        {getFieldDecorator('search.types', {
          initialValue: '-1'
        })(
          <Select placeholder="选择类型" style={{ width: 170 }} >
            <Option value='-1'>全部</Option>
            <Option value='100'>充值</Option>
            <Option value='101'>提现</Option>
            <Option value='102'>发布广告机广告扣除</Option>
            <Option value='103'>发布家庭锁广告扣除</Option>
            <Option value='104'>发布手机屏保广告扣除</Option>
            <Option value='105'>广告机广告获得</Option>
            <Option value='106'>家庭锁广告获得</Option>
            <Option value='107'>手机屏保广告获得</Option>

          </Select>
          )}
      </FormItem>
      <FormItem label="日期">
        {getFieldDecorator('search.date', {
          initialValue: []
        })(
          <RangePicker format="YYYY/MM/DD" />
          )}
      </FormItem>
      <FormItem >
        <Button type="primary" icon="search" htmlType="submit">搜索</Button>
      </FormItem>
     
    </Form>
  }
}
const SearchForm = Form.create({})(SearchsForm);
